<template>
  <div>
    <a-input-search
      placeholder="请输入模块名称"
      v-model="InputSearch"
      disabled
      size="large"
      @search="ChangeDown(options)"
    >
      <a-button slot="enterButton">{{this.Show?"保存":"编辑"}}</a-button>
    </a-input-search>
    <transition   
      name="fade"
      enter-active-class="animated fadeIn"
      leave-active-class="animated fadeOut"
      :duration="500"
    >
      <div style="margin-top:5px" v-if="Show">
        <a-input addonBefore="zh" v-model="options.zh" placeholder="请输入中文标题" />
        <a-input addonBefore="mn" v-model="options.mn" placeholder="请输入蒙文标题" />
        <a-input addonBefore="en" v-model="options.en" placeholder="请输入英文标题" />
      </div>
    </transition>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
@Component({
  name: "ant-inpt-search",
  layout: "menu"
})
export default class AntInputSearch extends Vue {
  /**
   * options={
   *  zh:"",
   *  mn:"",
   *  en:"",
   * }
   */
  @Prop({ type: Object, required: true }) options!: object;
  @Prop({ type: Boolean, required: true }) Show!: boolean;
  @Prop({ type: String, required: true }) InputSearch!: string;
  @Emit("ChangeDown")
  ChangeDown(n: object) {}
}
</script>